var app = new Vue({
    el: '.menu_setting_box.js_menuBox',
    data:function () {
            return {
                "gzh_name":'实时预览',
//              "menu":{"button":[{"type":"view","name":"今日歌曲","key":"V1001_TODAY_MUSIC","url":"","sub_button":[]},{"type":"click","name":"歌手简介","key":"V1001_TODAY_SINGER","sub_button":[]},{"name":"菜单","sub_button":[{"type":"view","name":"搜索","url":"http://www.soso.com/","sub_button":[]},{"type":"view","name":"视频","url":"http://v.qq.com/","sub_button":[]},{"type":"click","name":"赞一下我们","key":"V1001_GOOD","sub_button":[]}]}]},
                "menu":{
                    "button":[
                        {"type":"click","name":"歌手简介","key":"V1001_TODAY_SINGER","url":"","sub_button":[]},
                        {"name":"菜单","sub_button":[
                                {"type":"view","name":"搜索","key":"","url":"http://www.soso.com/","sub_button":[]},
                                {"type":"view","name":"视频","key":"","url":"http://v.qq.com/","sub_button":[]},
                                {"type":"click","name":"赞一下我们","key":"V1001_GOOD","url":"","sub_button":[]}
                            ]
                        }
                    ]
                },
//              "menu":{'button':[]},
                "new_menu":{'button':[]},
                "activeMenuName":'',
                "activeMenuIndex":'',
                "activeMenuItemName":'',
                "activeMenuItemIndex":'',
                "showDelBtnType":'', //1:delMenu 2:delMenuItem
                "showMenuContentType":'2', //1:发送消息 2:跳转链接
                "showMenuContentMsgType":'' //1:图文信息 2:图片 3:语音 4:视频
            }
        },
    methods:{
        menu_data_completing:function () {
            for(var i=0;i<this.menu.button.length;i++){
                if(!('type' in this.menu.button[i])){
                    this.menu.button[i].type = 'click';
                }
                if(!('name' in this.menu.button[i])){
                    this.menu.button[i].name = '';
                }
                if(!('key' in this.menu.button[i])){
                    this.menu.button[i].key = '';
                }
                if(!('url' in this.menu.button[i])){
                    this.menu.button[i].url = '';
                }
                if(!('sub_button' in this.menu.button[i])){
                    this.menu.button[i].sub_button = [];
                }
                if(this.menu.button[i].sub_button.length>0){
                    for(var j=0;j<this.menu.button[i].sub_button.length;j++) {
                        if (!('type' in this.menu.button[i].sub_button[j])) {
                            this.menu.button[i].sub_button[j].type = 'click';
                        }
                        if (!('name' in this.menu.button[i].sub_button[j])) {
                            this.menu.button[i].sub_button[j].name = '';
                        }
                        if (!('key' in this.menu.button[i].sub_button[j])) {
                            this.menu.button[i].sub_button[j].key = '';
                        }
                        if (!('url' in this.menu.button[i].sub_button[j])) {
                            this.menu.button[i].sub_button[j].url = '';
                        }
                        if (!('sub_button' in this.menu.button[i].sub_button[j])) {
                            this.menu.button[i].sub_button[j].sub_button = [];
                        }
                    }
                }
            }
        },
        saveData:function () {
            //补全数据,无数据也要为空
            this.menu_data_completing();
            console.log(this.menu);
            for(var i=0;i<this.menu.button.length;i++){
                if(this.menu.button[i].sub_button.length>0){
                    var _sub_button = [];
                    for(var j=0;j<this.menu.button[i].sub_button.length;j++){
                        if(this.menu.button[i].sub_button[j].type == 'click'){
                            _sub_button[j]={
                                "type":this.menu.button[i].sub_button[j].type,
                                "name":this.menu.button[i].sub_button[j].name,
                                "key":this.menu.button[i].sub_button[j].key
                            };
                        }else if(this.menu.button[i].sub_button[j].type == 'view'){
                            _sub_button[j]={
                                "type":this.menu.button[i].sub_button[j].type,
                                "name":this.menu.button[i].sub_button[j].name,
                                "url":this.menu.button[i].sub_button[j].url
                            };
                        }
                    }
                    if(this.menu.button[i].type == 'click'){
                        this.new_menu.button[i]={
                            "name":this.menu.button[i].name,
                            "sub_button":_sub_button
                        };
                    }else if(this.menu.button[i].type == 'view'){
                        this.new_menu.button[i]={
                            "name":this.menu.button[i].name,
                            "sub_button":_sub_button
                        };
                    }
                }else{
                    if(this.menu.button[i].type == 'click'){
                        this.new_menu.button[i]={
                            "type":this.menu.button[i].type,
                            "name":this.menu.button[i].name,
                            "key":this.menu.button[i].key
                        };
                    }else if(this.menu.button[i].type == 'view'){
                        this.new_menu.button[i]= {
                            "type": this.menu.button[i].type,
                            "name": this.menu.button[i].name,
                            "url": this.menu.button[i].url
                        };
                    }
                }
            }
            console.log(this.new_menu);
//                $('#result').html(this.new_menu);
            console.log(JSON.parse(JSON.stringify(this.new_menu)));
            console.log(JSON.stringify(this.new_menu));
            $('#result').html(JSON.stringify(this.new_menu));
        },
        menu_selected:function (name,index) {
            //console.log(name);
            //console.log(index);
            //console.log(this.$el);
            //console.log($(e.srcElement));
            //console.log($(e.target));
            this.showDelBtnType = 1;
            this.activeMenuName = name;
            this.activeMenuIndex = index;
            this.activeMenuItemName = '';
            this.activeMenuItemIndex = '';

            //补全数据,无数据也要为空
            this.menu_data_completing();

            if(this.menu.button[this.activeMenuIndex].sub_button.length > 0){
                this.showMenuContentType = '';
            }else{
                this.showMenuContentType = 2;//this.activeMenuBtnType();
            }
        },
        menu_item_selected:function (name,index) {
            this.showDelBtnType = 2;
            this.activeMenuItemName = name;
            this.activeMenuItemIndex = index;

            //补全数据,无数据也要为空
            this.menu_data_completing();

            if(this.activeMenuIndex > 0 || this.activeMenuIndex === 0){
                if(this.menu.button[this.activeMenuIndex].sub_button.length > 0){
                    this.showMenuContentType = 2;//this.activeMenuBtnType();
                }
            }
        },
        menu_add:function () {
            if(this.menu.button.length < 3){
                this.activeMenuItemIndex = '';
                this.activeMenuItemName = '';
                this.menu.button.push({"type":"click","name":"菜单名称","key":"","url":"","sub_button":[]});
                this.activeMenuIndex = this.menu.button.length-1;
                this.activeMenuName = '菜单名称';
                this.showDelBtnType = 1;
                //补全数据,无数据也要为空
                this.menu_data_completing();
            }else{
                alert('最多3个一级菜单');
            }
        },
        menu_item_add:function () {
            if(this.menu.button[this.activeMenuIndex].sub_button.length < 5){
                this.menu.button[this.activeMenuIndex].sub_button.push({"type":"click","name":"子菜单名称","key":"","url":"","sub_button":[]});
                this.activeMenuItemIndex = this.menu.button[this.activeMenuIndex].sub_button.length-1;
                this.activeMenuItemName = '子菜单名称';
                this.showDelBtnType = 2;
                //补全数据,无数据也要为空
                this.menu_data_completing();
            }else{
                alert('最多5个二级菜单');
            }
        },
        menu_del:function () {
            if(this.menu.button.length <= 3 && this.menu.button.length >0){

                if((this.activeMenuIndex !== 0) && (this.activeMenuIndex == this.menu.button.length-1)){
                    this.menu.button.splice(this.activeMenuIndex,1);
                    this.activeMenuIndex -= 1;
                }else if(this.activeMenuIndex == 0){
                    this.menu.button.splice(this.activeMenuIndex,1);
                    this.activeMenuIndex = 0;
                }else{
                    this.menu.button.splice(this.activeMenuIndex,1);
                }

                if(this.menu.button.length == 0){
                    this.activeMenuIndex = '';
                    this.activeMenuName = '';
                    this.activeMenuItemIndex = '';
                    this.activeMenuItemName = '';
                }
            }
        },
        menu_item_del:function () {
            if(this.menu.button[this.activeMenuIndex].sub_button.length <=5 && this.menu.button[this.activeMenuIndex].sub_button.length>0 ){
                if(this.activeMenuItemIndex == this.menu.button[this.activeMenuIndex].sub_button.length-1){
                    this.menu.button[this.activeMenuIndex].sub_button.splice(this.activeMenuItemIndex,1);
                    this.activeMenuItemIndex -= 1;
                }else if(this.activeMenuItemIndex == 0){
                    this.menu.button[this.activeMenuIndex].sub_button.splice(this.activeMenuItemIndex,1);
                    this.activeMenuItemIndex = 0;
                }else{
                    this.menu.button[this.activeMenuIndex].sub_button.splice(this.activeMenuItemIndex,1);
                }

                if(this.menu.button[this.activeMenuIndex].sub_button.length == 0){
                    this.activeMenuIndex = '';
                    this.activeMenuName = '';
                    this.activeMenuItemIndex = '';
                    this.activeMenuItemName = '';
                }
                this.showMenuContentType = 2;//this.activeMenuBtnType();
            }
        },
        radio_label_selected:function (val) {
            this.showMenuContentType = 2;//val;
            if(val == 1){
                this.setType('click');
            }else if(val == 2){
                this.setType('view');
            }
        },
        content_msg_tab_nav:function (val) {
            this.showMenuContentMsgType = val;
        },
        activeMenuType:function () {
            if(this.activeMenuIndex !== '' && this.activeMenuItemIndex !== ''){
                //子菜单、二级菜单
                return 2;
            }else if(this.activeMenuIndex !== '' && this.activeMenuItemIndex === ''){
                //一级菜单
                return 1;
            }else{
                return 0;
            }
        },
        activeMenuBtnType:function () {
            if(this.activeMenuType() === 1){
                //一级菜单
                switch(this.menu.button[this.activeMenuIndex].type){
                    case 'click':
                        return 1;
                    case 'view':
                        return 2;
                    default:
                        return 0;
                }
            }else if(this.activeMenuType() === 2){
                //子菜单、二级菜单
                switch(this.menu.button[this.activeMenuIndex].sub_button[this.activeMenuItemIndex].type){
                    case 'click':
                        return 1;
                    case 'view':
                        return 2;
                    default:
                        return 0;
                }
            }else{
                return '';
            }
        },
        isSet:function (variable) {
            if(typeof(variable)!='undefined'){
                return true;
            }else{
                return false;
            }
        },
        setType:function (type) {
            console.log(this.activeMenuIndex);
            if(this.activeMenuType() == 1){
                this.menu.button[this.activeMenuIndex].type = type;
            }else if(this.activeMenuType() == 2){
                this.menu.button[this.activeMenuIndex].sub_button[this.activeMenuItemIndex].type = type;
            }
        },
        setNemMenuObj:function () {
            for(var i=0;i<this.menu.button.length;i++){
                if(this.menu.button[i].sub_button.length>0){
                    this.new_menu.push({"name":this.menu.button[i].name,"sub_button":this.menu.button[i].sub_button});
                }else{
                    if(this.menu.button[i].type == 'click'){
                        this.new_menu.push({"name":this.menu.button[i].name,"type":this.menu.button[i].type,"key":this.menu.button[i].key,"sub_button":[]});
                    }else if(this.menu.button[i].type == 'view'){
                        this.new_menu.push({"name":this.menu.button[i].name,"type":this.menu.button[i].type,"url":this.menu.button[i].url,"sub_button":[]});
                    }
                }
            }
        }
    }
});